<script lang="ts" setup>
/**
 * 基础布局组件
 *
 * 功能：
 * 1. 提供应用的基础布局结构
 * 2. 集成用户信息展示和操作
 * 3. 处理通知消息
 * 4. 提供锁屏功能
 * 5. 管理水印显示
 */

import type { NotificationItem } from '@vben/layouts';

// 定义菜单项类型
interface MenuItem {
  key: string;
  handler: () => void;
  icon: any;
  text: string;
  command: string;
}

// Vue 核心功能导入
import { computed, ref, watch, h } from 'vue';

// Vben 组件和工具导入
import { AuthenticationLoginExpiredModal } from '@vben/common-ui';  // 登录过期模态框
import { VBEN_DOC_URL, VBEN_GITHUB_URL } from '@vben/constants';  // 常量配置
import { useWatermark } from '@vben/hooks';                        // 水印 Hook
import { BookOpenText, CircleHelp, MdiGithub } from '@vben/icons';// 图标组件
import {
  BasicLayout,                                                     // 基础布局组件
  LockScreen,                                                      // 锁屏组件
  Notification,                                                    // 通知组件
  UserDropdown,                                                    // 用户下拉菜单
} from '@vben/layouts';
import { preferences } from '@vben/preferences';                   // 偏好设置
import { useAccessStore } from '@vben/stores';      // 状态管理
import { openWindow } from '@vben/utils';                         // 工具函数
import { useUserStore } from '#/store/modules/user';  // 修改导入路径

// 项目相关导入
import { $t } from '#/locales';                                   // 国际化工具
import { useAuthStore } from '#/store';                          // 认证状态管理
import LoginForm from '#/views/_core/authentication/login.vue';   // 登录表单组件
import ChangePassword from '#/views/_core/user/change-password.vue';

// 模拟通知数据
const notifications = ref<NotificationItem[]>([
  {
    avatar: 'https://avatar.vercel.sh/vercel.svg?text=VB',
    date: '3小时前',
    isRead: true,
    message: '描述信息描述信息描述信息',
    title: '收到了 14 份新周报',
  },
  {
    avatar: 'https://avatar.vercel.sh/1',
    date: '刚刚',
    isRead: false,
    message: '描述信息描述信息描述信息',
    title: '朱偏右 回复了你',
  },
  {
    avatar: 'https://avatar.vercel.sh/1',
    date: '2024-01-01',
    isRead: false,
    message: '描述信息描述信息描述信息',
    title: '曲丽丽 评论了你',
  },
  {
    avatar: 'https://avatar.vercel.sh/satori',
    date: '1天前',
    isRead: false,
    message: '描述信息描述信息描述信息',
    title: '代办提醒',
  },
]);

// 状态管理实例
const userStore = useUserStore();                                // 用户状态
const authStore = useAuthStore();                                // 认证状态
const accessStore = useAccessStore();                            // 访问权限状态

// 水印相关功能
const { destroyWatermark, updateWatermark } = useWatermark();

// 计算属性：是否显示通知小红点
const showDot = computed(() =>
  notifications.value.some((item) => !item.isRead),
);

// 添加修改密码弹框状态
const showChangePassword = ref(false);

// 监听状态变化
watch(() => showChangePassword.value, (newVal) => {
  console.log('showChangePassword changed:', newVal);
});

/**
 * 用户下拉菜单配置
 * 包含：修改密码、文档链接、GitHub链接、问答链接
 */
const menus = computed(() => [
  {
    key: 'change-password',
    handler: () => {
      console.log('点击修改密码 - handler');  // 添加日志
      showChangePassword.value = true;
    },
    icon: h('span', { class: 'el-icon-key' }),
    text: '修改密码',
    command: 'change-password'
  },
  {
    key: 'doc',
    handler: () => {
      openWindow(VBEN_DOC_URL, {
        target: '_blank',
      });
    },
    icon: BookOpenText,
    text: $t('ui.widgets.document'),
    command: 'doc'
  },
  {
    key: 'github',
    handler: () => {
      openWindow(VBEN_GITHUB_URL, {
        target: '_blank',
      });
    },
    icon: MdiGithub,
    text: 'GitHub',
    command: 'github'
  },
  {
    key: 'qa',
    handler: () => {
      openWindow(`${VBEN_GITHUB_URL}/issues`, {
        target: '_blank',
      });
    },
    icon: CircleHelp,
    text: $t('ui.widgets.qa'),
    command: 'qa'
  },
]);

// 计算属性：用户头像
const avatar = computed(() => {
  return userStore.userInfo?.avatar ?? preferences.app.defaultAvatar;
});

/**
 * 处理用户登出
 * 调用认证状态管理的登出方法
 */
async function handleLogout() {
  await authStore.logout(false);
}

/**
 * 清空所有通知
 */
function handleNoticeClear() {
  notifications.value = [];
}

/**
 * 将所有通知标记为已读
 */
function handleMakeAll() {
  notifications.value.forEach((item) => (item.isRead = true));
}

/**
 * 监听水印配置变化
 * 根据配置显示或隐藏水印
 */
watch(
  () => preferences.app.watermark,
  async (enable) => {
    if (enable) {
      await updateWatermark({
        content: `${userStore.userInfo?.username}`,
      });
    } else {
      destroyWatermark();
    }
  },
  {
    immediate: true,
  },
);

// 处理密码修改成功
function handlePasswordChanged() {
  console.log('Password changed successfully');
  showChangePassword.value = false;
  // 可以在这里添加其他成功后的处理逻辑，比如要求重新登录
  handleLogout();
}

// 处理菜单命令
function handleCommand(command: string) {
  console.log('Command received:', command);
  const menuItem = menus.value.find(item => item.command === command);
  if (menuItem) {
    menuItem.handler();
  }
}
</script>

<template>
  <!--
    基础布局组件
    提供清除偏好设置并登出的事件处理
  -->
  <BasicLayout @clear-preferences-and-logout="handleLogout">
    <!-- 用户下拉菜单插槽 -->
    <template #user-dropdown>
      <UserDropdown
        :avatar="avatar"
        :menus="menus"
        :text="userStore.userInfo?.realName"
        description="ann.vben@gmail.com"
        tag-text="Pro"
        @logout="handleLogout"
        @command="handleCommand"
      />
    </template>

    <!-- 通知中心插槽 -->
    <template #notification>
      <Notification
        :dot="showDot"
        :notifications="notifications"
        @clear="handleNoticeClear"
        @make-all="handleMakeAll"
      />
    </template>

    <!-- 额外内容插槽：登录过期模态框 -->
    <template #extra>
      <AuthenticationLoginExpiredModal
        v-model:open="accessStore.loginExpired"
        :avatar="avatar"
      >
        <LoginForm />
      </AuthenticationLoginExpiredModal>
    </template>

    <!-- 锁屏组件插槽 -->
    <template #lock-screen>
      <LockScreen :avatar="avatar" @to-login="handleLogout" />
    </template>

    <!-- 修改密码弹窗 -->
    <ChangePassword
      v-model:open="showChangePassword"
      @success="handlePasswordChanged"
    />
  </BasicLayout>
</template>

<style>
@import 'element-plus/theme-chalk/el-icon.css';
</style>
